import React, { Component } from 'react';
// import { connect } from 'react-redux';
import { NavBar, Icon, List, InputItem, TextareaItem, Button } from 'antd-mobile';

class Com extends Component {
  render () {
    
    return (
      <div className="box">
        <header className="header">
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => console.log('onLeftClick')}
          rightContent={[
            <Icon key="0" style={{ marginRight: '16px' }} />,
            <Icon key="1" type="ellipsis" />,
          ]}
        >我的订阅-旅游专栏</NavBar>
        </header>
        <div className="content" 
         style={{background: "#FFFFFF"}}
        >
          <p style={{margin: "20px 20px"}}>
            申请专栏作家,<br/><br/>
            为了更加广泛地更新和扩展旅游内容的分享，我们开通了专栏旅游栏目，作者可以在每个主题下进行创作
          </p>
          <div>
          <List renderHeader={() => '专栏内容'}
          style={{margin: "10px 20px"}}
          >
          <p style={{margin:"10px 0"}}>专栏名称</p>
          <InputItem
          style={{margin:"10px 0"}}
           border="black"
            placeholder="请输入专栏名称"
            ref={el => this.autoFocusInst = el}
          ></InputItem>
          <p>专栏方向</p>
          <InputItem
            placeholder="请输入专栏方向"
            ref={el => this.inputRef = el}
          ></InputItem>
          <p>专栏介绍</p>
          <TextareaItem
            placeholder="请输入专栏介绍"
            data-seed="logId"
            autoHeight
            ref={el => this.customFocusInst = el}
          />
        </List>
          </div>
          <Button type="ghost" style={{ margin: "40px",}} className="am-button-borderfix">申请开通</Button>
        </div>
      </div>
    )
  }
}
// export default connect()(Com)
export default Com